<template>
	<w-panel-wrap>
    <w-panel-title :title="title"></w-panel-title>
    <w-panel class="over">
      <form class="form-horizontal form-lines transition-ease">
        <w-form-group>
          <w-label class="name">模板名称：</w-label>
          <w-input class="input" v-model="params.transName" :validate="false" :maxlength="25"></w-input> 
        </w-form-group>
        <w-form-group>
          <w-label class="name">宝贝地址：</w-label>
          <w-areapicker v-model="params.areaId" class="input no-width"></w-areapicker> 
        </w-form-group>
        <w-form-group>
          <w-label class="name" :must="false">发货时间：</w-label>
          <w-select v-model="params.transTime" class="input" :options="options"></w-select>
          <w-label :must="false" class="tip">如实设定宝贝的发货时间，不仅可避免发货咨询与纠纷，还能促进成交！</w-label>
        </w-form-group>
        <w-form-group>
          <w-label class="name">是否包邮：</w-label>
          <div class="input-sm" @click="params.isFree = 0">
            <w-radio name="isFree" label="0" :value="params.isFree">自定义运费</w-radio>
          </div>
          <div class="input-sm" @click="params.isFree = 1">
            <w-radio name="isFree" label="1" :value="params.isFree">卖家承担运费</w-radio>
          </div>
        </w-form-group>
        <w-form-group>
          <w-label class="name">计价方式：</w-label>
          <div class="input-sm" @click="params.transType = 0">
            <w-radio name="transType" label="0" :value="params.transType">按件数</w-radio>
          </div>
          <div class="input-sm" @click="params.transType = 1">
            <w-radio name="transType" label="1" :value="params.transType">按重量</w-radio>
          </div>
        </w-form-group>

        <!-- 运费模板是否默认 -->
        <w-form-group>
          <w-label class="name">设为默认运费模板：</w-label>
          <div class="input-sm" @click="params.isDefault = 1">
            <w-radio name="isDefault" label="1" :value="params.isDefault">是</w-radio>
          </div>
          <div class="input-sm" @click="params.isDefault = 0">
            <w-radio name="isDefault" label="0" :value="params.isDefault">否</w-radio>
          </div>
        </w-form-group>

        <w-form-group>
          <w-label class="name fl" :must="false">运送方式：</w-label>
          <div class="input-float">
            <div class="line">除指定地区外，其他地区的运费采用“默认运费”</div>
            <div class="line">
              <w-radio class="ml4" label="1" name="transExpress" :value="params.transExpress" @on-radio="setTransExpress">快递</w-radio>
              <!-- 配置快递规则组件 -->
              <div class="m22" v-if="params.isFree === 0 && params.transExpress == 1">
                <carriage-rule v-model="params.transExpressInfo" :type="params.transType"></carriage-rule>
              </div>
            </div>
            <div class="line">
              <w-radio class="ml4" label="1" name="transEms" :value="params.transEms" @on-radio="setTransEms">EMS</w-radio>
              <!-- 配置快递规则组件 -->
              <div class="m22" v-if="params.isFree === 0 && params.transEms == 1">
                <carriage-rule v-model="params.transEmsInfo" :type="params.transType"></carriage-rule>
              </div>
            </div>
            <div class="line">
              <w-radio class="ml4" label="1" name="transMail" :value="params.transMail" @on-radio="setTransMail">平邮</w-radio>
              <!-- 配置快递规则组件 -->
              <div class="m22" v-if="params.isFree === 0 && params.transMail == 1">
                <carriage-rule v-model="params.transMailInfo" :type="params.transType"></carriage-rule>
              </div>
            </div>
          </div>
        </w-form-group>
        <w-form-group>
          <button type="button" class="btn-cancel" @click="backToTmplList()">取消</button>
          <button type="button" class="btn-save" @click="saveCarriageTmpl()">保存</button>
        </w-form-group>
      </form>
    </w-panel>
  </w-panel-wrap>
</template>

<script>
// 配置运费规则组件
import carriageRule from './components/CarriageRule'

// 地区组件
import areaPicker from '../../components/AreaPicker/areaPicker'

// 获取所有的地址信息
import { apiAreaAll, apiCarriage, apiDictionaryByName } from '../../common/api.js'

// 导入吐司弹框
import app from '../../main'

// 导入session对象
import { session } from '../../common/util'

export default {
  components: {
    carriageRule,
    areaPicker
  },
  data() {
    return {
      isEdit: false,
      options: [],
      areaIds: '',
      params: {
        accessToken: this.$store.getters.token,
        areaId: '',
        isFree: '',
        transType: '',
        isDefault: 1, // 是否默认模板,默认是
        transName: '',
        transTime: null,
        transExpress: 0,
        transExpressInfo: '',
        transEms: 0,
        transEmsInfo: '',
        transMail: 0,
        transMailInfo: ''
      }
    }
  },
  computed: {
    ruleType() {
      // 如果是按件计费则返回1
      if (this.fee2 == 'ss1') {
        return 1
      }

      // 如果是按重量计费，则返回2
      return 2
    },
    title() {
      // 如果传过来了id，则说明当前是编辑
      if (this.$route.params.id) {
        return '编辑模板'
      }
      // 如果没有传过来id，则说明是新增页面
      return '新增模板'
    }
  },
  created() {
    // 如果此项存在，则说明是编辑页面
    if (this.$route.params.id) {
      // 从session中把值取出来
      let carriageTmpl = session.get('carriageTmpl')

      // 给session中赋值accesstoken
      carriageTmpl.accessToken = this.params.accessToken

      // 设置id
      carriageTmpl.id = this.$route.params.id

      // 将session中的数据拷贝到参数中
      this.params = carriageTmpl

      // 标记当前是编辑页面
      this.isEdit = true

      // 标记地区id集合
      this.params.areaId = `${carriageTmpl.oneId},${carriageTmpl.twoId},${carriageTmpl.threeId}`
    }

    // 获取发货时间
    this.handlerDevlieryTime()
  },
  methods: {
    /**
     * 跳转上个页面，到运费模板设置页面，即物流管理首页
     */
    backToTmplList() {
      this.$router.push({path: '/carriage'})
    },

    /**
     * 获取发货时间
     */
    handlerDevlieryTime() {
      this.options = []

      // 发货时间列表
      let deliveryTime = session.get('delivery-time')

      // 如果从缓存中取到数值，则不再请求接口
      if (deliveryTime && deliveryTime.length > 0) {
        this.options = deliveryTime
        return
      }

      // 请求接口
      apiDictionaryByName('发货时间').then((data) => {
        // 按照orderType排序
        data.list.sort((a, b) => {
          return (a.dataOrder - b.dataOrder)
        })

        // 遍历数据
        data.list.forEach((v) => {
          this.options.push({
            value: v.dataValue,
            label: v.dataName
          })
        })

        // 将发货时间放到缓存中
        session.set('delivery-time', this.options)
      })
    },

    /**
     * 选中快递，并取消其他快递种类的选中
     */
    setTransExpress() {
      // 设置为选中
      this.params.transExpress = 1
      this.params.transEms = 0
      this.params.transMail = 0

      // 清空列表数据
      this.params.transEmsInfo = ''
      this.params.transMailInfo = ''
    },

    /**
     * 选中EMS，并取消其他快递种类的选中
     */
    setTransEms() {
      // 设置为选中
      this.params.transExpress = 0
      this.params.transEms = 1
      this.params.transMail = 0

      // 清空列表
      this.params.transExpressInfo = ''
      this.params.transMailInfo = ''
    },

    /**
     * 选中平邮，并取消其他快递种类的选中
     */
    setTransMail() {
      // 设置为选中
      this.params.transExpress = 0
      this.params.transEms = 0
      this.params.transMail = 1

      // 清空列表
      this.params.transExpress = ''
      this.params.transEms = ''
    },

    /**
     * 当前值是否被选中
     *
     * @params { Number }  value  需要判断的值
     * @return { Boolean } value  是否被选中
     */
    isSelected(value) {
      return value == '0' || value == '1'
    },

    /**
     * 校验物流模板填写的数据是否完整
     */
    validateCarriageTmpl(tmpl) {
      // 如果当前模板是空，则此模板是完整的（之前有非空检验）
      if (!tmpl || tmpl.length == 0) {
        return true
      }

      // 设置为完整的标记
      let isComplete = true

      // 遍历模板，如果模板中有为填写的字段
      tmpl.forEach((v) => {
        let reg = /^[0-9]*$/
        // 如果运费件数和运费价格没有填写，则设置标志位是false
        if (!v.trans_add_fee || !v.trans_add_weight || !v.trans_fee || !v.trans_weight || v.city_name == '未添加地区' || !reg.test(v.trans_add_fee) || !reg.test(v.trans_add_weight) || !reg.test(v.trans_fee) || !reg.test(v.trans_weight) || v.trans_add_fee == 0 || v.trans_add_weight == 0 || v.trans_fee == 0 || v.trans_weight == 0) {
          isComplete = false
        }
      })
      return isComplete
    },

    /**
     * 保存模板
     */
    saveCarriageTmpl() {
      // 如果地区没有选择，则弹框提示
      if (!this.params.transName) {
        app.$toast('请输入模板名称')
        return
      }

      // 如果地区没有选择，则弹框提示
      if (!this.params.areaId) {
        app.$toast('请选择地区')
        return
      }

      // 如果地区没有选择，则弹框提示
      if (!this.isSelected(this.params.isFree)) {
        app.$toast('请选择是否包邮')
        return
      }

      // 如果计价方式没有选择，则弹框提示
      if (!this.isSelected(this.params.transType)) {
        app.$toast('请选择计价方式')
        return
      }

      // 如果当前用户选择了自定义运费
      if (this.params.isFree === 0) {
        // 如果没有输入模板，则弹框提示
        if (!this.params.transEmsInfo && !this.params.transExpressInfo && !this.params.transMailInfo) {
          this.$toast('请配置运费模板')
          return
        }

        // 检验快递模板是否填写完整
        if (!this.validateCarriageTmpl(this.params.transExpressInfo)) {
          this.$toast('快递模板未填写完整或信息错误')
          return
        }

        // 检验EMS模板是否填写完整
        if (!this.validateCarriageTmpl(this.params.transEmsInfo)) {
          this.$toast('快递模板未填写完整或信息错误')
          return
        }

        // 检验平邮模板是否填写完整
        if (!this.validateCarriageTmpl(this.params.transMailInfo)) {
          this.$toast('快递模板未填写完整或信息错误')
          return
        }
      }
      // this.params.areaId = this.params.areaId.split(',')[0]
      // 将值格式化成字符串
      this.params.transEmsInfo = this.params.transEmsInfo ? JSON.stringify(this.params.transEmsInfo) : ''
      this.params.transExpressInfo = this.params.transExpressInfo ? JSON.stringify(this.params.transExpressInfo) : ''
      this.params.transMailInfo = this.params.transMailInfo ? JSON.stringify(this.params.transMailInfo) : ''

      // 如果是编辑，则调用编辑接口
      if (this.isEdit) {
        // 将原本的值拷贝一份
        let params = Object.assign({}, this.params)
        // 分割地区id
        let areaIdList = params.areaId.split(',')
        // 将最后一个地区id赋值给id
        params.areaId = areaIdList[areaIdList.length - 1]
        console.log('********', params)
        // 请求接口
        apiCarriage.editTransport(params).then((data) => {
          // 1s后调到物流模板页面
          app.$toast('修改物流模板成功', () => {
            this.$router.push('/carriage')
          })
        })
        return
      }
      // 请求接口
      apiCarriage.addTransport(this.params).then((data) => {
        // 1s后调到物流模板页面
        app.$toast('新增物流模板成功', () => {
          this.$router.push('/carriage')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1400px) {
  .form-lines {
    margin-top: 10px;
    margin-left: 10px !important;
  }
}
.over {
  position: relative;
  overflow: auto;
}
.form-lines {
  min-width: 950px;
  margin-top: 10px;
  margin-left: 144px;

  .ml4 {
    margin-left: 4px;
  }

  .m22 {
    margin: 22px 0px;
  }

  .name {
    color: #999999;
    width: 150px;
    margin-right: 12px;
  }

  .input {
    display: inline-block;
    width: 290px;

    &.no-width {
      width: auto;
    }
  }

  .input-sm{
    background-color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    width: 140px;
  }

  .input-float {
    color: #999999;
    display: inline-block;
    margin-top: 6px;
  }

  .form-control {
    width: 290px;
  }

  .tip {
    color: #666666;
    margin-left: 30px;
  }

  .line {
    margin-bottom: 10px;
  }

  .fl {
    float: left;
  }

  .btn-cancel {
    margin-left: 112px;
  }

  .btn-save {
    margin-left: 26px;
  }
}
</style>